<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="800px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" :disabled="disabled">
        <el-form-item label="" prop="">
          <el-input v-model="form.keyword" clearable placeholder="请输入用户姓名、手机号" :style="{width: inputWidth}" />
          <el-button type="primary" size="small" style="margin-left: 20px" @click="getList">查 询
          </el-button>
        </el-form-item>
      </el-form>
      <div class="tabel_box">
        <div class="tabel_box_h" v-if="tabelList.length!=0">
          <export-excel-button title="预约明细" action="/equityManager/equityCardIssue/exportSubscribe" :params="ExportParams" />
        </div>
        <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="用户姓名" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true" />
          <el-table-column label="预约时间" align="center" prop="time" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from "@/utils/auth";
  import {
    subscribeList
  } from "@/api/equityManager/equityCardIssue";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    // dicts: ['asset_card_type'],
    name: "dialogwhiteList",
    components: {
      ExportExcelButton,
    },
    data() {
      return {
        labelWidth: '120px',
        inputWidth: '200px',
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "预约明细",
        // 是否显示弹出层
        visible: false,
        //预约数组
        tabelList: [],
        // 表单参数
        form: {
          issueId: '', //发行id
          keyword: '', //用户姓名/手机号码
        },
        // 表单校验
        rules: {

        },
      };
    },
    created() {

    },
    computed: {
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          issueId: this.form.issueId,
          keyword: this.form.keyword
        };
        return params;
      },
    },
    methods: {
      //获取预约列表
      getList(id) {
        this.loading = true
        let data = {
          ...this.form
        }
        subscribeList(data).then(response => {
          this.tabelList = response.result
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      /** 打开白名单弹窗 */
      open(id) {
        this.reset();
        this.form.issueId = id
        this.getList()
        this.visible = true
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form.keyword = ''
      },
    }
  };

</script>
<style scoped>
  .tabel_box_h {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .icon_yes {
    font-size: 30px;
    color: #67c23a;
  }

  .icon_no {
    font-size: 30px;
    color: #f56c6c;
  }

</style>
